<script>
  var configureBehavior = {

    changeHandlerCount: 0,
    objectChangeHandlerCount: 0,

    contentChanged: function() {
      this.changeHandlerCount++;
      this.stomp = 10;
    },
    objectChanged: function() {
      this.objectChangeHandlerCount++;
    }
  };

</script>

<dom-module id="x-configure-value">
  <template>
    <span id="content">{{content}}</span>
  </template>
  <script>
    Polymer({

      is: 'x-configure-value',

      behaviors: [configureBehavior],

      properties: {
        content: {
          type: String,
          notify: true,
          observer: 'contentChanged',
          value: 'default'
        },
        object: {
          type: Object,
          notify: true,
          value: function() { return {foo: 'obj-default'}; },
          observer: 'objectChanged'
        },
        readOnly: {
          readOnly: true,
          value: 'default'
        },
        stomp: {
          value: 5
        }
      }

    });
  </script>
</dom-module>

<dom-module id="x-configure-gchild">
  <template>
    <span id="content">{{content}}</span>
  </template>
  <script>
    Polymer({

      is: 'x-configure-gchild',

      behaviors: [configureBehavior],

      properties: {
        content: {
          type: String,
          notify: true,
          observer: 'contentChanged',
          value: 'gchild'
        },
        object: {
          type: Object,
          notify: true,
          value: function() { return {foo: 'obj-default'}; },
          observer: 'objectChanged'
        },
        readOnly: {
          readOnly: true,
          value: 'default'
        },
        stomp: {
          value: 5
        }
      }

    });
  </script>
</dom-module>

<dom-module id="x-configure-child">
  <template>
    <x-configure-gchild id="gchild" content="{{content}}" object="{{object}}"></x-configure-gchild>
  </template>
  <script>
    Polymer({

      is: 'x-configure-child',

      behaviors: [configureBehavior],

      properties: {
        content: {
          type: String,
          notify: true,
          observer: 'contentChanged',
          value: 'child'
        },
        negatedContent: {
          type: Boolean,
          observer: 'negatedContentChanged',
          value: true
        },
        compoundInput: {
          type: String,
          observer: 'compoundInputChanged',
          value: 'default'
        },
        object: {
          type: Object,
          notify: true,
          value: function() { return {foo: 'obj-default'}; },
          observer: 'objectChanged'
        },
        readOnly: {
          readOnly: true,
          value: 'default'
        },
        stomp: {
          value: 5
        },
        attrDash: {
          observer: 'attrDashChanged',
          value: 'default'
        },
        attrNumber: {
          type: Number,
          observer: 'attrNumberChanged',
          value: 0
        },
        attrBoolean: {
          type: Boolean,
          observer: 'attrBooleanChanged',
          value: true
        }
      },

      created: function() {
        this.attrDashChanged = sinon.spy();
        this.attrNumberChanged = sinon.spy();
        this.attrBooleanChanged = sinon.spy();
        this.negatedContentChanged = sinon.spy();
        this.compoundInputChanged = sinon.spy();
      }

    });
  </script>
</dom-module>

<dom-module id="x-configure-simple-child">
  <script>
    Polymer({

      is: 'x-configure-simple-child',

      properties: {
        noeffect: String
      },

      ready: function() {
        this.hasPropertyAtReadyTime = (this.noeffect !== undefined);
      }

    });
  </script>
</dom-module>

<dom-module id="x-configure-host">
  <template>
    <x-configure-child id="child"
        content="{{content}}"
        negated-content="[[!content]]"
        compound-input="a [[simple]] [[content]]"
        object="{{object.goo}}"
        attr$="{{attrValue}}"
        attr-dash$="{{attrValue}}"
        attr-number$="{{attrNumber}}"
        attr-boolean$="{{attrBoolean}}"
    ></x-configure-child>
    <x-configure-simple-child id="simple" noeffect="{{simple}}"></x-configure-simple-child>
  </template>
  <script>
    Polymer({

      is: 'x-configure-host',

      behaviors: [configureBehavior],

      properties: {
        content: {
          type: String,
          notify: true,
          observer: 'contentChanged',
          value: 'host'
        },
        object: {
          type: Object,
          notify: true,
          value: function() { return {goo: {foo: 'obj-host'}}; },
          observer: 'objectChanged'
        },
        readOnly: {
          readOnly: true,
          value: 'default'
        },
        stomp: {
          value: 5
        },
        attrValue: {
          value: 'attrValue'
        },
        attrNumber: {
          value: 42
        },
        attrBoolean: {
          value: false
        },
        simple: {
          value: 'simple'
        }
      }

    });
  </script>
</dom-module>

<script>
  window.XConfigLazy = {
    is: 'x-config-lazy',
    properties: {
      noEffectProp: Number,
      defaultUsesNoEffectProp: {
        value: function() {
          return this.noEffectProp * 2;
        }
      },
      prop: {
        observer: 'propChanged'
      },
      readOnlyProp: {
        readOnly: true,
        value: 'readOnly'
      },
      hadAttrProp: {
        value: 'hadAttrProp',
        observer: 'hadAttrPropChanged'
      }
    },
    created: function() {
      this.noEffectProp = 1;
      this.propChanged = sinon.spy();
      this.hadAttrPropChanged = sinon.spy();
    }
  };
</script>

<dom-module id="x-config-lazy-host">
  <template>
    <x-config-lazy id="lazy" prop="{{foo}}" read-only-prop="{{foo}}" had-attr-prop="attrValue"></x-config-lazy>
  </template>
  <script>
    Polymer({
      is: 'x-config-lazy-host',
      properties: {
        foo: {
          value: 'foo',
          observer: 'fooChanged'
        }
      },
      fooChanged: function(foo) {
        this.$.lazy.hadAttrProp = foo;
      }
    })
  </script>
</dom-module>
